<template>
  <div class="container" :style="btnStyle">
    <img class="btn-img" :src="btnImg"/>
    <span class="btn-text" v-text="btnText"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  const HEIGHT = '18vw';
  const WIDTH = '23vw';
  export default {

    name: 'btn-icon-above',

    data() {
      return {
        btnStyle: {
          height: HEIGHT,
          width: WIDTH
        }
      };
    },

    props: {
      btnText: {
        type: String,
        default: 'need text !',
        required: true
      },
      btnImg: {
        type: String,
        default: null,
        required: true
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .container
    display flex
    flex-direction column
    justify-content center
    align-items center
    background white
    height HEIGHT

  .btn-img
    height btn-icon-width

  .btn-text
    margin-top 1vw
    word-vw(12px,second-ash)
</style>
